今回はスタイルシートを使って背景画像のタイリングを制御します。 タイリングというのは、タイルを敷き詰めたように、同じ画像を繰り返し表示することで、バックグラウンドやテーブルではデフォルトで設定されています。 例えば、ウォンドウを背景画像で左右に分割するとき、通常はこのタイリングを防ぐために、横に長い画像を用意しなければなりません。当然、画像サイズが大きくなり、ページが重くなってしまいます。 そこで、スタイルシートを使って、タイリングを縦方向または横方向に制御します。 実際の使用例がサンプルページにあるので、そちらもご覧ください。 ●スタイルシート <HEAD> <style> body {background:#ffffff url(images/back.gif) repeat-y} </style> </HEAD> |
 |
 |
 |
|
| まず、背景画像を用意します。最低限のサイズでいいのですが、繰り返す方向（縦または横）の重なる部分に注意してください。例えば、上下に並べるときに、重なる部分がずれているとデザインが狂ってしまいます。文字やメニューが上にのることも計算して、色やサイズを決めます。 |
 |
|
|
 |
 |
| 通常は<BODY BACKGROUND="---">として、"---"部分に背景画像を読み込むのですが、そうすると右図のように、縦にも横にも際限なくタイリング表示されてしまいます。 |
||
|
 |
 |
| <HEAD>タグの中にスタイルシートを記述します。background:で余白のカラー、url()で背景画像、repeat-yでタイリングの制御方向を指定します。 ●スタイルシート <HEAD> <style> body {background:#ffffff url(images/back.gif) repeat-y} </style> </HEAD> |
||
|
 |
 |
| タイリングを制御する方向は、縦がy、横がxです。スタイルシートの記述で、repeat-xとすれば、背景画像を左右に並べることができます。
ブラウザで読み込むと、背景画像が指定した方向に並び、画像の余白はカラー指定した背景色になります。 |
||